<template>
  <div style="height: 100%; overflow: auto;">
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div ref="mceContentBody" class="mce-content-body" v-html="model[name]" />
    <a-modal
      v-if="imgPreviewUrl"
      :visible="Boolean(imgPreviewUrl)"
      :footer="null"
      width="70%"
      @cancel="handleCancel"
    >
      <img ref="previewImg" style="width: 100%;padding: 20px;" :src="imgPreviewUrl">
    </a-modal>
  </div>
</template>

<script>
import { FormMixin, FormCustomStyleMixin } from "./mixins/formMixins";

export default {
  name: "InputRichForm",
  mixins: [FormMixin, FormCustomStyleMixin],
  methods: {
    handleCancel() {
      this.imgPreviewUrl = undefined;
    }
  }
};
</script>

<style>
.mce-content-body {
  min-width: 100%;
  min-height: 100%;
  font-family: "宋体";
}

.mce-content-body h1 {
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  line-height: 1;
}

.mce-content-body img {
  max-width: 100%!important;
  height: auto;
}
</style>